<template>
  <div class="page-wrap">
    <n-data-table :columns="columns" :data="data" />
  </div>
</template>
<script lang="ts">
/* eslint-disable vue/no-unused-components */
import { defineComponent, h, onMounted } from 'vue'
import { NDataTable, NButton } from 'naive-ui'
import { DataTableColumns } from 'naive-ui/es/data-table'
import { getState, setState, uuid } from '@/utils/index'

interface IListItem {
  // id: string
  name: string
  lastModifyDate: number
  status: 'run' | 'stop'
}

interface IStoreItems {
  [id: string]: IListItem
}
const list: Array<IListItem> = [
  {
    name: 'test',
    lastModifyDate: new Date().getTime(),
    status: 'stop'
  }
]

const columns: DataTableColumns = [
  {
    title: '序号',
    key: 'now',
    align: 'center',
    render(_, rowIndex) {
      return rowIndex + 1
    }
  },
  {
    title: '油猴功能描述',
    key: 'name',
    align: 'center'
  },
  {
    title: '最后修改时间',
    key: 'lastModifyDate',
    align: 'center'
  },
  {
    title: '操作',
    key: 'operations',
    align: 'center',
    render() {
      return [
        h(
          NButton,
          {
            style: {
              marginRight: '10px'
            },
            size: 'small',
            onClick: () => {
              console.log(1)
            }
          },
          { default: () => '查看/编辑' }
        ),
        h(
          NButton,
          {
            style: {
              marginRight: '10px'
            },
            type: 'primary',
            size: 'small',
            onClick: () => {
              console.log(1)
            }
          },
          { default: () => '启用' }
        ),
        h(
          NButton,
          {
            style: {
              marginRight: '10px'
            },
            type: 'error',
            size: 'small',
            onClick: () => {
              console.log(1)
            }
          },
          { default: () => '停止' }
        )
      ]
    }
  }
]

export default defineComponent({
  components: {
    NDataTable,
    NButton
  },
  setup() {
    onMounted(() => {
      const uid = uuid()
      setState<IStoreItems>({
        [uid]: {
          name: '都是黑色的',
          lastModifyDate: 2,
          status: 'stop'
        }
      })
      getState(uid).then(res => {
        console.log(res)
        getState().then(res2 => {
          console.log(res2)
        })
      })
    })

    return {
      data: list,
      columns
    }
  }
})
</script>
<style lang="scss" scoped>
.page-wrap {
  width: calc(100% - 80px);
  height: calc(100vh - 40px);
  padding: 20px 40px;
}
</style>
